import { Table, Space, Tag } from 'antd'
function Article () {
  const removeItem = item => {
    console.log('item:', item)
  }
  // 列的设置
  const columns = [
    {
      // 标题
      title: '名字',
      // 数据中的字段名
      dataIndex: 'name',
      key: 'name', // 标记 可以继续沿用属性名
      render: (text, record) => {
        // text dataIndex对应的数据的值
        // console.log('text:', text)
        // console.log('record:', record)
        return <span>👍👍👍👍👍</span>
      }
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address'
    },
    {
      title: '标签',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <>
          {tags.map(tag => {
            let color = tag.length > 5 ? 'geekblue' : 'green'
            if (tag === 'loser') {
              color = 'volcano'
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            )
          })}
        </>
      )
    },
    {
      title: '操作',
      key: 'action',
      // 这里输出的两个是一样的
      // 设置了dataIndx 会取获取指定属性的值
      // 如果没有设置dataIndex 获取到的就是这一行的数据
      render: (text, record) => {
        // console.log('text:', text)
        // console.log('record:', record)
        return (
          <Space size='middle'>
            <a href='#'>Invite {record.name}</a>
            <a
              href='#'
              onClick={() => {
                removeItem(record)
              }}
            >
              Delete
            </a>
          </Space>
        )
      }
    }
  ]

  // 数据
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    }
  ]

  return (
    <div>
      <Table columns={columns} dataSource={data} />
    </div>
  )
}
export default Article
